<template>
  <div>
    <el-card class="box-card" shadow="false">
      <div slot="header" class="clearfix">
        <span>{{ title }}</span>
        <el-button
          style="float: right"
          type="primary"
          size="mini"
          @click="handleSave"
          >{{ $t("common.save") }}</el-button
        >
      </div>
      <div class="text item">
        <permission-tree
          v-model="checkedPermissionKeys"
          :role="role"
        ></permission-tree>
      </div>
    </el-card>
  </div>
</template>
<script>
import permissionTree from "@/components/Tree/permissionTree.vue";
import { setPermission, getPermission } from "@/api/role";
export default {
  components: {
    permissionTree,
  },
  data() {
    return {
      checkedPermissionKeys: [],
      permissions: [],
    };
  },
  methods: {
    getData() {
      this.checkedPermissionKeys = [];
      this.permissions = [];
      getPermission(this.role.name).then((res) => {
        let groups = res && res.groups ? res.groups : [];

        if (!groups || groups.length == 0) return;

        for (let i = 0; i < groups.length; i++) {
          this.permissions = this.permissions.concat(groups[i].permissions);
        }
        let grantedPermissions = this.permissions.filter((value) => {
          return value.isGranted;
        });

        this.checkedPermissionKeys = grantedPermissions
          ? grantedPermissions.map((permission) => {
              return permission.name;
            })
          : [];
      });
    },
    handleSave() {
      let checkedKeys = this.checkedPermissionKeys;
      let postData = this.getPostData(checkedKeys);

      if (checkedKeys.length == 0) {
        this.$confirm(
          this.$t("tips.confirmCancelPermission"),
          this.$t("common.tips"),
          {
            confirmButtonText: this.$t("common.ok"),
            cancelButtonText: this.$t("common.cancel"),
            type: "warning",
          }
        )
          .then(() => {
            this.savePermission(postData);
          })
          .catch(() => {});
      } else {
        this.savePermission(postData);
      }
    },
    savePermission(permissions) {
      setPermission(permissions, this.role.name).then((res) => {
        this.$notify({
          title: "成功",
          message: "保存成功",
          type: "success",
          position: "bottom-right",
        });
        this.getData();
      });
    },
    getPostData() {
      let result = [];

      if (!this.permissions || this.permissions.length == 0) return result;

      for (let i = 0; i < this.permissions.length; i++) {
        let name = this.permissions[i].name;

        let matchKey = this.checkedPermissionKeys.find((key) => {
          return key == this.permissions[i].name;
        });
        result.push({ name: name, isGranted: matchKey ? true : false });
      }
      return result;
    },
  },
  mounted() {
    this.getData();
  },
  watch: {},
  props: {
    role: {
      type: Object,
      default: () => {},
    },
    title: {
      type: String,
      default: "",
    },
  },
};
</script>
